<template>
  <div class="right_center">
    <Echart :options="options" id="bottomLeftChart" class="echarts_bottom"></Echart>
  </div>
</template>

<script>

import { graphic } from "echarts";
export default {
  data() {
    return {
      options: {}
    };
  },
  props: {},
  watch: {
    "$store.state.setting.lastSEIASComputed": {
      deep: true,
      handler(newValue, oldValue) {
        this.getData(newValue);
      }
    }
    // '$store.state.setting.lastSEIASData':{
    //   deep:true,
    //   handler(newValue,oldValue){
    //     console.log('right_center-NewlastSEIASData',newValue.selectOptions.deliveryYear);
    //   }
    // },
  },
  mounted() {
    this.getData(this.$store.state.setting.lastSEIASComputed);
  },
  methods: {
    getData(newValue) {
      let res = {};
      res.emisCost = newValue.emisCost;
      res.techInflu = newValue.techInflu;
      res.operInflu = newValue.operInflu;
      res.fuelCost = this.$store.state.setting.lastSEIASData.decarbonModel.fuelSolu.cost;
      res.fuelEUTable = newValue.fuelEUTable;
      res.etsTable = newValue.etsTable;
      res.carbonPriceTable = newValue.carbonPriceTable;
      res.category = this.$store.state.setting.lastSEIASData.selectOptions.deliveryYear;
      this.init(res);
    },
    init(newData) {
      this.options = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF"
          },
          formatter: function(params) {
            // 添加单位
            var result = params[0].name + "<br>";
            params.forEach(function(item) {
              result +=
                item.marker +
                " " +
                item.seriesName +
                " : " +
                Number(item.value).toFixed(1) +
                "</br>";
            });
            return result;
          }
        },
        legend: {
          data: [
            "Total Fuel POEX",
            "Fuel Retro Cost",
            "Total Tech Cost",
            "Total Oper Cost",
            "FuelEU Penalty",
            "Cost for ETS",
            "Other Carbon Tax"
          ],
          textStyle: {
            color: "#B4B4B4"
          },
          top: "0"
        },
        grid: {
          left: "70px",
          right: "10px",
          bottom: "30px",
          top: "20px"
        },
        xAxis: {
          data: newData.category,
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          {
            splitLine: {
              lineStyle: {
                color:  "#606060"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisLabel: {
              formatter: "{value}"
            }
          }
        ],
        series: [
          {
            name: "Total Fuel POEX",
            type: "bar",
            stack: "COST",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5
            },
            z: -12,
            data: newData.emisCost.totalFuelOPEX
          },
          {
            name: "Fuel Retro Cost",
            type: "bar",
            stack: "COST",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5
            },
            z: -12,
            data: newData.fuelCost
          },
          {
            name: "Total Tech Cost",
            type: "bar",
            stack: "COST",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5
            },
            z: -12,
            data: newData.techInflu.cost
          },
          {
            name: "Total Oper Cost",
            type: "bar",
            stack: "COST",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5
            },
            z: -12,
            data: newData.operInflu.cost
          },
          {
            name: "FuelEU Penalty",
            type: "bar",
            stack: "COST",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5
            },
            z: -12,
            data: newData.fuelEUTable.penalty
          },
          {
            name: "Cost for ETS",
            type: "bar",
            stack: "COST",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5
            },
            z: -12,
            data: newData.etsTable.totalCost
          },
          {
            name: "Other Carbon Tax",
            type: "bar",
            stack: "COST",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5
            },
            z: -12,
            data: newData.carbonPriceTable.otherCarbonTax
          }
        ]
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.right_center {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
